<template>
  <div class="">
    <div class="orderpay-box knife_container">
      <!-- 支付方式 -->
      <div class="order-invoice">
        <span class="info_title">选择支付方式</span>
        <div class="order_info">
          <span class="orderid">订单号: {{orderId}}</span>
          <span class="rt pay-text">
            实付: <em class="payment">￥{{payment | floatPrices}}</em>
          </span>
        </div>
        <section class="order_detail">
          <el-tabs v-model="payMode" class="tab-box" @tab-click="tabPayMode">
            <el-tab-pane label="线下支付" name="1">
              <div class="order_radio">
                <el-radio-group v-model="payType" class="radio-box">
                  <el-radio label="3" class="radio-label radio-text" v-if="!openInvoice"><img class="radio-img" src="../../images/xjzf.png">现金支付</el-radio>
                  <el-radio label="4" class="radio-label radio-text" v-if="openInvoice"><img class="radio-img" src="../../images/ylzf.png">银联支付</el-radio>
                  <div v-if="!openInvoice" class="paytype-bank">
                    <el-radio label="5" class="radio-label radio-text"><img class="radio-img" src="../../images/gsyh.png">工行转账</el-radio>
                    <el-radio label="6" class="radio-label radio-text"><img class="radio-img" src="../../images/nyyh.png">农行转账</el-radio>
                  </div>
                </el-radio-group>
              </div>
              <div class="bank-box" v-if="openInvoice">
                <p class="pay-title">银行转账</p>
                <p class="pay-p"> <span class="title">开户行</span>： 中国工商银行台州温岭温西支行</p>
                <p class="pay-p"> <span class="title">账&nbsp;&nbsp;&nbsp;号</span>： 1207046119200100072</p>
                <p class="pay-p"> <span class="title">户&nbsp;&nbsp;&nbsp;名</span>： 温岭市鼎轩网络技术有限公司</p>
              </div>
            </el-tab-pane>
            <!-- v-if="!isLimit" -->
            <el-tab-pane label="网上支付" name="0">
              <!-- <p class="pay-title">承兑余额: ￥{{acceptanceAmount | floatPrices}}</p>
              <p class="pay-title">个人余额: ￥{{balanceAmount | floatPrices}}</p> -->
              <div class="order_radio">
                <el-radio-group v-model="payType" class="radio-box">
                  <el-radio label="11" class="radio-label radio-text" :disabled="!canUseAcctance"><img class="radio-img" src="../../images/cdzf.png">承兑支付￥{{acceptanceAmount | floatPrices}}</el-radio>
                  <!-- :disabled="!openInvoice" v-show="openInvoice":disabled="!openInvoice" v-show="openInvoice" -->
                  <el-radio label="13" class="radio-label radio-text" :disabled="!canUseBalance"><img class="radio-img" src="../../images/yezf.png">余额支付￥{{balanceAmount | floatPrices}}</el-radio>
                  <el-radio label="2" class="radio-label radio-text" v-if="!isLimit && openInvoice"><img class="radio-img" src="../../images/wx.png">微信支付</el-radio>
                  <el-radio label="0" class="radio-label radio-text" v-if="!isLimit && openInvoice"><img class="radio-img" src="../../images/zfb.png">支付宝</el-radio>
                </el-radio-group>
              </div>
              <!-- <p class="notice-text">
                <span class="el-icon-warning color-org2"></span> 应监管机构要求，刀具联盟平台的扫码支付业务将暂停使用，造成的不便，我们深感抱歉.
              </p> -->
            </el-tab-pane>
          </el-tabs>
        </section>
      </div>
      <el-button type="primary" class="rt btn-pay" @click.native="goToPay">{{payMode === '0' ? '去支付' : '确认'}}</el-button>

      <form :action="bankPayObj.url" ref="submitForm" method="post" enctype="application/x-www-form-urlencoded" v-if="bankPayObj">
          <input type="hidden" name="cmd_id" :value="bankPayObj['cmdId']"/> <br>
          <input type="hidden" name="mer_cust_id" :value="bankPayObj['merCustId']"/> <br>
          <input type="hidden" name="version" :value="bankPayObj['version']"/> <br>
          <input type="hidden" name="check_value" :value="bankPayObj['sign']"/> <br>
      </form>
  </div>
  <!-- 支付确认弹窗 用户选择成功或失败 -->
  <el-dialog title="确认" :show-close="showclose" :visible.sync="payResultVisible" :close-on-click-modal="showclose" top="20vh" width="650px">
    <span>订单付款是否成功?若失败,请重新尝试或者联系网站客服人员.</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="payStatusAction">取消</el-button>
      <el-button type="primary" @click="payStatusAction">确认</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import {Tabs, TabPane, Checkbox, RadioGroup, Radio, Button, Dialog} from 'element-ui'
import {payredirect, payStatus, getOrderInfos} from '@/service/get-data'
import {mapActions, mapState} from 'vuex'
// import http from '@/config/http'
export default {
  components: {
    elTabs: Tabs,
    elTabPane: TabPane,
    elCheckbox: Checkbox,
    elRadioGroup: RadioGroup,
    elRadio: Radio,
    elButton: Button,
    elDialog: Dialog
  },
  data () {
    return {
      payMode: '1', // 支付方式 0 线上 1 线下
      payType: '',
      codeImgUrl: '',
      bankPayObj: {},
      showclose: false, // 是否显示关闭按钮
      payResultVisible: false, // 支付结果弹窗
      payment: 0 // 实付金额从接口获取(优刃预付)
    }
  },
  computed: {
    ...mapState({
      acceptanceAmount: state => state.user.acceptanceAmount,
      balanceAmount: state => state.user.balanceAmount
    }),
    canUseAcctance () {
      return this.acceptanceAmount >= this.payment
    },
    canUseBalance () {
      return this.balanceAmount >= this.payment
    },
    // payment () {
    //   let totalPrice = this.$route.query.totalPrice
    //   return totalPrice
    // },
    orderId () {
      let rid = this.$route.query.rid
      return rid
    },
    isLimit () {
      let limit = this.$route.query.isLimit
      if (String(limit) === 'false') {
        // this.payMode = '0'
        return false
      } else {
        // this.payMode = '1'
        return true
      }
    },
    openInvoice () {
      let needInv = this.$route.query.openInvoice
      String(needInv) === 'false' || !needInv ? needInv = false : needInv = true
      return needInv
    }
  },
  methods: {
    ...mapActions({
      updateCartList: 'fetchCartList'
    }),
    // 初始化
    _initCashier () {
      let query = this.$route.query
      if (query.payMode || query.payType) {
        if (String(query.payMode) === '-1' || String(query.payType) === '-1') {
          this.payMode = '1'
          this.defaultPayType()
          return
        }
        this.payMode = String(query.payMode)
        this.payType = String(query.payType)
      }
      // 支付默认选中的类型
      // this.defaultPayType()
    },
    // 默认支付类型和方式
    defaultPayType () {
      if (this.openInvoice && this.payMode === '1') { // 含税 支付方式为线下----银联
        this.payType = '4'
      } else if (!this.openInvoice && this.payMode === '1') { // 不含税 线下----现金
        this.payType = '3'
      } else {
        this.payType = '0'
      }
    },
    // 切换支付方式 payMode
    tabPayMode (tab) {
      this.payMode = tab.name
      this.payType = ''
      // this.defaultPayType()
    },
    // 关闭窗口
    closeWindow () {
      window.opener = null
      window.close()
    },
    // 区分支付方式 // 如果是线下支付1,线上支付0
    async goToPay () {
      if (!this.payType) {
        this.$message.error('请选择支付类型')
        return false
      }
      if (this.payMode === '0') { // 线上支付
        this.fetchPayCreate()
      } else if (this.payMode === '1') {
        this.fetchPayCreate()
        this.$alert('请尽快支付,并上传支付凭证', '', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.replace({name: 'OrderSubmitRemind', params: {orderId: this.orderId}})
          }
        })
      }
    },
    // 支付接口
    async fetchPayCreate () {
      let res = await payredirect(this.orderId, this.payType, this.payMode)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        if (this.payMode === '0') {
          res = res.data.data
          this.bankPayObj = res
          console.log(res)
          // 承兑支付 跳转
          if (this.payType - 0 === 11 || this.payType - 0 === 13) {
            this.$router.replace({name: 'OrderSubmitRemind', params: {orderId: this.orderId}})
            return
          }
          this.$nextTick(() => {
            // this.$refs.submitForm.setAttribute('target', '_blank')
            this.$refs.submitForm.submit()
            // this.payResultVisible = true
          })
        }
      } else {
        this.$message({
          message: res.data.resultMsg
        })
      }
    },
    // 支付结果 用于线上支付
    async payStatusAction () {
      this.updateCartList()
      let res = await payStatus(this.orderId)
      if (res.data && res.data.resultCode && res.data.resultCode === 2000) {
        res = res.data
        this.payResultVisible = false
        res.data === 1 ? this.$router.replace({name: 'OrderSubmitRemind', params: {orderId: this.orderId}}) : this.$router.replace({name: 'orderDetail', params: {'orderId': this.orderId}})
        // clearCookie('orderId')
        // clearCookie('payType')
      } else {
        // 没有生产订单号或者订单号不存在
        this.$router.replace({name: 'orderManage'})
      }
    },

    async fetchPayment () { // 获取实付金额
      let res = await getOrderInfos(this.orderId)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.payment = res.data.data.finalAmount
      } else {
        console.error(res.data.resultMsg || '网络错误')
      }
    }
  },
  mounted () {
    this._initCashier()
    this.fetchPayment()
    // this.haveOrderIdPay()
  }
}
</script>

<style lang="scss" scoped>
.logo-nav{
  background: #f7f7f7;
  text-align: center;
  padding: 25px 0;
  img{
    width: 250px;
  }
}
.order-invoice {
    position: relative;
    font-size: 14px;
    color: #666666;
    padding-bottom: 20px;
    //  @include border_bt();
  }
  .info_title{
    font-family: PingFangSC-Medium, Microsoft YaHei;
    display:inline-block;
    color: #333333;
    font-size: 18px;
    line-height: 25px;
    margin-top: 10px;
    margin-bottom: 12px;
    }
      .pay-title{
    background: #f7f7f7;
    padding-left: 15px;
    font-size: 14px;
    line-height: 40px;
    color: #666;
    margin-bottom: 15px;
  }
  .pay-img-box{
    background: url(../../images/pay.png);
    &.xjzf{
      background-position:center;
      background-repeat: no-repeat;
    }
  }
  .pay-p{
    line-height: 30px;
  }
  .order_radio{
    margin-top: 15px;
    font-size: 16px;
    color: #333;
    height: 45px;
    line-height: 45px;
    margin-bottom: 15px;
  }
  .radio-box{
    .radio-label{
      padding-left: 12px;
      border: 1px solid #dedede;
      border-radius: 2px;
      height: 45px;
      line-height: 45px;
    }
    .radio-label.is-checked{
      border: 1px solid #ffcc00;
    }
    .radio-text{
      padding-right: 27px;
      font-size: 16px;
      font-weight: 600;
      color: #000;
      letter-spacing: 0.05em;
    }
  }
  .radio-label{
    padding-left: 12px;
    border: 1px solid #dedede;
    border-radius: 2px;
    height: 45px;
    line-height: 45px;
  }
  .radio-img{
    height: 25px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .orderpay-box{
    position: relative;
    margin-bottom: 50px;
    margin-top: 20px;
    background: #ffffff;
    padding: 10px 15px;
    overflow: hidden;
    min-height: 430px;
  }
  .qrcode-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #d8dce5;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  }
  .qrcode-title{
    text-align: center;
    background: #f7f7f7;
    border-bottom: 1px solid #d8dce5;
  }
  .qrcode-div{
    width: 250px;
    height: 250px;
    margin-top: 20px;
    img{
      width: 100%;
    }
  }
  .pay-btn{
    width: 150px;
    padding: 12px 0;
    display: inline-block;
    text-align: center;
    background: #ffcc00;
    color: #fff;
    border-radius: 5px;
  }
  .order_info{
    margin-bottom: 5px;
    padding: 15px 0 24px;
    border-bottom: 1px solid #dcdcdc;
    overflow: hidden;
  }
  .orderid{
    font-size: 16px;
    color: #666;
  }
  .pay-text{
    font-size: 18px;
    vertical-align: bottom;
  }
  .payment{
    color:#F55923;
    font-size: 20px;
    vertical-align: middle;
  }
  .paytype-bank{
    display: inline-block;
    margin-left: 30px;
  }
  .btn-pay{
    width: 300px;
    height: 60px;
    background-color: #ffcc00;
    border-radius: 2px;
    color: #444444;
    font-size: 16px;
  }
  .notice-text{
        color: #f66f5b;
    margin-top: 20px;
    font-weight: bold;
    line-height: 2;
  }
</style>
<style>
  .el-tabs__nav-wrap::after{
    height: 1px;
    background-color: #dcdcdc
  }
  .el-tabs__active-bar{
    background-color: #ffcc00;
  }
</style>

